/* eslint-disable @typescript-eslint/no-explicit-any */

import CopyCommand from "../commands/CopyCommand";
import DeleteCommand from "../commands/DeleteCommand";
import CommandRegistry from "../contextmenu/CommandRegistry";
import MenuRegistry from "../contextmenu/MenuRegistry";
import useContextMenu from "../contextmenu/useContextMenu";

MenuRegistry.registry("square", {
  id: "copy",
  label: "拷贝绿色",
  when: (ctx) => ctx.bgColor === "green",
});

MenuRegistry.registry("square", {
  id: "delete",
  label: "删除",
  whenDisabled: (ctx) => ctx.bgColor === "red",
});

CommandRegistry.register("copy", CopyCommand);
CommandRegistry.register("delete", DeleteCommand);

const Square = (props: any) => {
  const { bgColor = "pink" } = props;
  const showMenu = useContextMenu("square");
  return (
    <div
      className="square"
      style={{ background: bgColor }}
      onContextMenu={(e) => showMenu(e, { bgColor })}
    ></div>
  );
};

export default Square;
